<template>
  <button :class="buttonClass">
    <slot></slot>
  </button>
</template>

<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator'

@Component
export default class QButton extends Vue {
  @Prop({default: false}) primary: boolean
  @Prop({default: false}) warn: boolean
  @Prop({default: false}) error: boolean
  @Prop({default: false}) success: boolean

  @Prop({default: false}) light: boolean
  @Prop({default: false}) plain: boolean


  get buttonClass() {
    return 'bg' + (this.primary ? '-primary' : this.warn ? '-warn' : this.error ? '-error' : this.success ? '-success' : '-main') + (this.light ? '-light' : this.plain ? '-plain' : '')
  }
}
</script>
<style lang="scss">

</style>
